{% filter jscomp %}
var slide1 = document.querySelector('#slide-1');
var slide2 = document.querySelector('#slide-2');
var slide3 = document.querySelector('#slide-3');
var slides = document.querySelectorAll('.slide');
var caption1 = document.querySelector('#caption-1');
var caption2 = document.querySelector('#caption-2');
var caption3 = document.querySelector('#caption-3');
var captions = document.querySelectorAll('.caption');
var left = document.querySelector('#button-left');
var right = document.querySelector('#button-right');
var stop = false;

var pfx = ['webkit', 'moz', 'MS', 'o', ''];
function prefixedEventListener(element, type, callback) {
  for (var p = 0; p < pfx.length; p++) {
    if (!pfx[p]) type = type.toLowerCase();
    element.addEventListener(pfx[p] + type, callback, false);
  }
}

function checkArrow(el) {
  if (el == slide1) {
    left.style.display = 'none';
    right.style.display = 'block';
  } else if (el == slide2) {
    left.style.display = 'block';
    right.style.display = 'block';
  } else if (el == slide3) {
    left.style.display = 'block';
    right.style.display = 'none';
  }
}

function carousel(elem, type) {
  Array.prototype.forEach.call(type, function(el) {
    el.classList.remove('animate');
    if (type == captions) {
      el.style.display = 'none';
    }
  });
  elem.classList.add('animate');
  if (type == captions) {
    elem.style.display = 'block';
  }
}

function pre(el) {
  do {
    el = el.previousSibling;
  } while (el && el.nodeType !== 1);
  return el;
}

function next(el) {
  do {
    el = el.nextSibling;
  } while (el && el.nodeType !== 1);
  return el;
}

function buttonClick(direction) {
  var animate = document.querySelectorAll('.animate');
  var animateSlide = direction(animate[0]);
  var animateCaption = direction(animate[1]);
  checkArrow(animateSlide);
  carousel(animateSlide, slides);
  carousel(animateCaption, captions);
  stop = true;
}

function animateEvent(slideNum, captionNum) {
  if (stop == true) {
    return false;
  }
  checkArrow(slideNum);
  carousel(slideNum, slides);
  carousel(captionNum, captions);
}

left.addEventListener('click', function() {
  buttonClick(pre);
});

right.addEventListener('click', function() {
  buttonClick(next);
});

prefixedEventListener(slide1, 'AnimationEnd', function(e) {
  animateEvent(slide2, caption2);
});

prefixedEventListener(slide2, 'AnimationEnd', function(e) {
  animateEvent(slide3, caption3);
});

prefixedEventListener(slide3, 'AnimationEnd', function(e) {
  animateEvent(slide1, caption1);
});
{% endfilter %}